<template>
    <div class="imageDetail">
        <div class="imageItem" v-for="item in imageDetailData" :key="item.id">
            <span v-for="(item2,index) in item.imageList"  :key="item2">
                <img :src="item2" alt="">
                <span v-if="index===0" class="mask" @click="$router.push('/imageAll/'+item.type)">
                    {{item.type | byType}}
                    <br/>
                    总共{{item.total}}张图片
                </span>
            </span>
        </div>
    </div>
</template>

<script>
export default {
    filters:{
        byType(value) {
            if(value === 1) {
                return "外观"
            } else if(value ===2) {
                return "内饰"
            } else {
                return "空间"
            }
        }
    },
    data() {
        return {
            imageDetailData: []
        }
    },
    created(){
        this.$api.getCarImage().then(res=>{
            this.imageDetailData = res.data;
        })
    }
}
</script>

<style lang='scss' scoped>
.imageDetail{
    width: 100%;
    height:100%;
    .imageItem{
        display: flex;
        flex-wrap: wrap;
        span{
            display: inline;
            width:33%;
            position: relative;
            img{
                width:100%;
            }
            .mask{
                width:100%;
                height:100%;
                position:absolute;
                top:0;
                left:0;
                background:rgba(0,0,0,.5);
                color:#fff;
                padding: 20px;;
            }
        }
    }
}
</style>